<template>
  <!--menu1htmlStart-->
  <div id="defaultId1" class="ub-fv  ">
    <div id="g70d67" :class="isMin" class=" ub-fv  uf6e69">
      <div id="ca3521" class=" white ub ub-ver ub-fv  u8a649">
        <div id="c1d6fb" @click="tabMenu()" class=" ub-ac ub ub-pc  u3f40e">
          <div id="c3638c" class=" icon-caidan iconfont ulev4  u367a3"></div>
        </div>
        <div id="g14cb3" class=" ub-f1 u0ac05">
          <div id="ccad79" v-for="(x,index) in data" class="  u47ae1">
            <div id="cc08e6" @click="fold(index,x)" class=" ub ub-ac  u457ea">
              <div id="c5752d" :class="x.isShow|foldIcon" class=" iconfont icon-zhankai ub ub-ac ub-pc  u9d584"></div>
              <div id="c3657a" class=" ub-f1 ub ub-ac  uf991e">
                <div id="c06cad" class="  ub5b3a"></div>
                <div id="c34d80" v-text="x.value" class=" ub-f1 umar-r uinn ub ub-ac  u9d584_1">
                  <div>首页</div>
                </div>
              </div>
            </div>
            <div id="ca5de2" v-show="x.isShow" class="  u58147">
              <div id="cdbc46" @click="slctList(y,index,index2)" :class="y.active|active" v-for="(y,index2) in x.list"
                   class=" ub-ac ub  u7a0fa_1">
                <div id="c472ce" :class="y.icon|defaultImg" class=" iconfont ub ub-ac ub-pc  u9d585_1"></div>
                <div id="c715c7" class=" ub-f1 ub ub-ac  uf991e">
                  <div id="ca9e5f" class="  ub5b3a"></div>
                  <div id="c5af62" v-text="y.value" class=" ub-f1 umar-r uinn ub ub-ac  u9d584_1">
                    <div>基本信息</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--menu1htmlEnd-->

</template>
<script>
  // interfaceCode
  export default {
    name: 'guiMenu1',
    mounted(){
      if (this.ismin) {
        this.isMin = 'menuMin'
      }
    },
    filters: {
      defaultImg(data){
        if (!data) {
          data = 'icon-shouye-shouye'
        }
        return data
      },
      foldIcon(data){ // 显示与折叠
        if (!data) {
          return 'u9d584_fold'
        }
      },
      active(data){
        if (data) {
          return 'active'
        }
      }
    },
    components: {},
    props: {
      'data': {},
      'ismin': {}, // 默认折叠
      'isFold': {}, // 每次选中就折叠其他
      'isDataChange': {} // 每次选中都由数据来处理
    },
    data () {
      return {
        isMin: ''
      }
    },
    methods: {
      default (){
      },
      tabMenu(){
        if (this.isMin) {
          this.isMin = ''
        } else {
          this.isMin = 'menuMin'
        }
      },
      fold(index, x){
//        this.openIndex = index
        var data = this.data
        for (var i in data) {
          var attr = data[i]
          if (index == i) { // 如果折叠为当前所选 则不处理  注意：这里不要用=== 这里有数字与字符串 格式需要转换
          } else if (attr.isShow) { // 将上一个打开的选项折叠起来
            if (this.isFold) { // 是否折叠其他
              attr.isShow = false
            }
          }
        }
        x.isShow = !x.isShow
//        this.init(true)
      },
      init(isFold) {
        var data = this.data
//        if (this.openIndex === '') { // 修复默认刷新时 展开的数据无论点那一条都会被折叠的问题  没有所选序号 则自动查找序号
//        }
        var openIndex
        for (var i in data) {
          var attr = data[i]
          if (attr.isShow) {
            openIndex = parseInt(i)
          }
        }

        for (var i in data) {
          var attr = data[i]
          var list = attr.list
          if (this.isFold) { // 是否折叠其他
            if (openIndex === parseInt(i)) {
              if (!isFold) {
                attr.isShow = true
              }
            } else {
              attr.isShow = false
            }
          }
          if (!isFold) {
            for (var j in list) {
              this.$set(list[j], 'active', false)
            }
          }
        }
      },
      slctList(x, index, index2){
        if (!this.isDataChange) {
          this.init()
          x.active = true
        }
        this.$emit('select', x, index, index2)
      }

      // methodsCode

    }
    ,
    computed: {}
  }
</script>
<style lang="less">
  .u367a3 {
    font-size: 14px !important;
  }

  .menu1cssStart {
  }

  html, body {
    height: 100%;
  }

  .uf6e69 {
    font-size: 13px;
    font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti, "Microsoft YaHei"
  }

  .u8a649 {
    width: 13.5em;
    background-color: #333744;
    font-family: 黑体;
  }

  .u3f40e {
    height: 1.99em;
    background-color: rgb(74, 80, 100);
  }

  .u367a3 {
    transform: rotate(90deg);
  }

  .u0ac05 {
  }

  .u47ae1 {
    color: rgb(255, 255, 255);
  }

  .u457ea {
    background-color: rgb(66, 72, 91);
    height: 2.5em;
  }

  .u9d584 {
    width: 2.5em;
  }

  .ub5b3a {
    display: none;
  }

  .u7a0fa_1 {
    height: 2.6em;
    padding: 0em 0.4em;
  }

  .u9d585_1 {
    width: 2.5em;
  }

  .menu1cssEnd {
  }

  .menuMin {
    .menu1_1cssStart {
    }
    .u8a649 {
      width: 3em;
      background-color: rgb(74, 80, 100);
      font-family: 黑体;
    }
    .u3f40e {
      height: 1.99em;
      background-color: rgb(74, 80, 100);
    }
    .u367a3 {
      transform: rotate(0deg);
    }
    .u457ea {
      background-color: rgb(66, 72, 91);
      height: 2.5em;
    }
    .u9d584 {
      width: 2.5em;
    }
    .uf991e {
      position: absolute;
      left: 3em;
      width: 6.28em;
      height: 2.5em;
      z-index: 100;
      display: none;
    }
    .ub5b3a {
      display: block;
      border-top: 0.4em solid transparent;
      border-right: 0.4em solid rgba(51, 55, 68, 0.9);
      height: 0px;
      border-bottom: 0.4em solid transparent;
    }
    .u9d584_1 {
      background-color: rgba(51, 55, 68, 0.9);
    }
    .u58147 {
      margin: 0px;
    }
    .u7a0fa_1 {
      height: 2.6em;
      padding: 0em;
    }
    .u9d585_1 {
      width: 2.5em;
    }
    .menu1_1cssEnd {
    }
  }

  .u47ae1 .iconfont {
    color: rgba(255, 255, 255, 0.7);
  }

  .uf6e69:hover {
    cursor: pointer;
  }

  .u457ea:hover {
    color: white;
    background: #00c1de;
  }

  .u7a0fa_1:hover, .u7a0fa_1:hover .iconfont {
    color: white;
    background: #4a5064;
  }

  .u457ea:hover .uf991e, .u7a0fa_1:hover .uf991e {
    display: flex;
  }

  .u9d584_fold {
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
  }

  .u58147 .active {
    background: #00c1de !important;
    color: white;
  }

  .u58147 .active .iconfont {
    background: #00c1de;
    color: white;
  }

  .u0ac05 {
    /*overflow-y: scroll;*/
    /*overflow-x: hidden;*/
  }

  // 去掉滚动条
  .u8a649 ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: papayawhip;
  }

  .u8a649 ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }


</style>
